<script setup lang="ts">
import { getOrderPayAPI } from '@/apis/consult';
import { showLoadingToast, showToast } from 'vant';
import { ref } from 'vue';
// 定义支付方式
const paymentMethod = ref<0 | 1>()

// 接收父组件传的值
// 1. orderId 订单id
// 2. show 控制抽屉组件的显示与隐藏
// 3. onClose 可传可不传 函数
// 4.
const props = defineProps<{
    isShow: boolean
    orderId: string
    onClose?: () => void
    actualPayment: number
    payCallback: string
}>()

// 子向父传值
const emit = defineEmits<{
    'update:show': [val: boolean]
}>()

// 支付按钮
const onPay = async () => {
    // 判断是否选择了支付方式
    if (!paymentMethod.value) return showToast('请选择支付方式')
    showLoadingToast({ message: '跳转支付中', duration: 0 })
    // 发请求
    const res = await getOrderPayAPI({
        paymentMethod: paymentMethod.value,
        orderId: props.orderId,
        payCallback: 'http://consult-patients.itheima.net' + props.payCallback
    })
    // console.log(res)
    window.location.href = res.data.payUrl
}
</script>

<template>
    <van-action-sheet :show="isShow" @update:show="emit('update:show', $event)" title="选择支付方式" :closeable="false"
        :close-on-popstate="false" :before-close="onClose">
        <div class="pay-type">
            <p class="amount">￥{{ actualPayment.toFixed(2) }}</p>
            <van-cell-group>
                <van-cell title="微信支付" @click="paymentMethod = 0">
                    <template #icon><cp-icons name="consult-wechat" /></template>
                    <template #extra>
                        <van-checkbox :checked="paymentMethod === 0" />
                    </template>
                </van-cell>
                <van-cell title="支付宝支付" @click="paymentMethod = 1">
                    <template #icon><cp-icons name="consult-alipay" /></template>
                    <template #extra>
                        <!-- :checked 可点击 -->
                        <van-checkbox :checked="paymentMethod === 1" />
                    </template>
                </van-cell>
            </van-cell-group>
            <div class="btn">
                <van-button type="primary" round block @click="onPay">立即支付</van-button>
            </div>
        </div>
    </van-action-sheet>
</template>

<style scoped lang="scss">
.pay-type {
    .amount {
        padding: 20px;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
    }

    .btn {
        padding: 15px;
    }

    .van-cell {
        align-items: center;

        .cp-icon {
            margin-right: 10px;
            font-size: 18px;
        }

        .van-checkbox :deep(.van-checkbox__icon) {
            font-size: 16px;
        }
    }
}
</style>